<template>
<div @keydown.enter="initOrders">
  <el-form inline  >
      <el-form-item label="请输入">
        <el-input v-model="query.carPlate" placeholder="请输入车牌号/订单号/车主手机号"></el-input>
      </el-form-item>
      <el-form-item label="订单来源">
        <el-select v-model="query.paymentWay" placeholder="请选择">
          <el-option value="商务端"></el-option>
          <el-option value="天猫"></el-option>
          <el-option value="淘宝"></el-option>
          <el-option value="中保车服"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择监测站">
        <el-autocomplete
          :trigger-on-focus="false"
          :debounce="500"
          class="inline-input"
          v-model="query.stationName"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          @select="handleSelect"
        ></el-autocomplete>
      </el-form-item>
      <br>
      <el-form-item label="司机">
         <el-autocomplete
          :trigger-on-focus="false"
          :debounce="500"
          class="inline-input"
          v-model="query.driverName"
          :fetch-suggestions="dieSearch"
          @select="leSelect"
        ></el-autocomplete>
      </el-form-item>
      <el-form-item label="城市">
        <pickArea :showArea="false" @getSite="getCity"></pickArea>
      </el-form-item>
      <el-form-item>
        <el-button @click="initOrders" type="primary">查询</el-button>
      </el-form-item>
    </el-form>

  <el-table :data="lists" stripe style="width: 100%" @expand-change="getExpand" row-key="id" :expand-row-keys="expand">
     <el-table-column type="expand" >
      <template slot-scope="props">
        <el-steps direction="vertical" :active="orderDetal.serviceState">
        <el-step title="预约">
          <template #description>
            <div class="desc-d"> <span>车牌：</span>{{props.row.carPlate}}</div>
            <div class="desc-d"> <span>地址：</span>{{orderDetal.address}}</div>
            <div class="desc-d"> <span>预检时间：</span>{{props.row.placeTestTime}}</div>
            <div class="desc-d"> <span>订单号：</span>{{orderDetal.id}}</div>
          </template>
        </el-step>
        <el-step title="预检">
          <template  #description>
             <div class="desc-d"> <span>客户姓名：</span>{{props.row.customerName}}</div>
             <div class="desc-d"> <span>客户电话：</span>{{props.row.customerPhone}}</div>
              <div class="desc-d"> <span>待检司机：</span>{{props.row.driverName}}</div>
              <div class="desc-d"> <span>实况照片：</span>
                 <el-image style="width: 100px; height: 100px" :src="items" fit="fit" v-for="(items,index) in orderDetal.pickCarImg" :key="index" :preview-src-list="orderDetal.pickCarImg"></el-image>
              </div>
              <div class="desc-d"> <span>取车签字：</span>
                <el-image style="width: 100px; height: 100px" :src="orderDetal.pickCarCustomerSign" :preview-src-list="orderDetal.pickCarImg"></el-image>
              </div>
          </template>
        </el-step>
        <el-step title="送检">
          <template  #description>
            <div class="desc-d"> <span>取车签字：</span>{{orderDetal.pickCarTime}}</div>
            <div class="desc-d"> <span>检测结果：</span>{{orderDetal.testResult}}</div>
          </template>
        </el-step>
        <el-step title="还车">
          <template  #description>
          <div class="desc-d"> <span>还车时间：</span>{{orderDetal.goBackCarTime}}</div>
          <div class="desc-d"> <span>还车签字：</span>
            <el-image style="width: 100px; height: 100px" :src="orderDetal.pickCarDriverSign" :preview-src-list="orderDetal.pickCarImg"></el-image>
          </div>
          </template>
        </el-step>
        <el-step title="归档">
          <template  #description>
           <div class="desc-d"> <span>评价反馈：</span></div>
           <div class="desc-d"> <span>回执图：</span>
            <el-image style="width: 100px; height: 100px" :src="items" fit="fit" v-for="(items,index) in orderDetal.testReport" :key="index" :preview-src-list="orderDetal.testReport"></el-image>
           </div>
          </template>
        </el-step>
  </el-steps>
      </template>
    </el-table-column>
    <el-table-column prop="carPlate" label="车牌" > </el-table-column>
    <el-table-column prop="customerName" label="车主姓名" > </el-table-column>
    <el-table-column prop="customerPhone" label="车主电话"> </el-table-column>
    <el-table-column label="提车地址" width="200">
        <template #default="scope">
          {{scope.row.province+scope.row.city+scope.row.area+scope.row.address}}
        </template>
     </el-table-column>
    <el-table-column prop="orderMoney" label="支付金额"> </el-table-column>
    <el-table-column prop="driverName" label="待检司机"> </el-table-column>
    <el-table-column prop="carType" label="车型"> </el-table-column>
    <el-table-column prop="paymentWay" label="订单来源"> </el-table-column>
    <el-table-column prop="stationName" label="监测站"> </el-table-column>
    <el-table-column  label="订单状态"> 
        <template #default="props">
            <el-tag effect="dark" v-if="props.row.orderState=='待开始'" type="danger"> {{ props.row.orderState }} </el-tag>
            <el-tag effect="dark" v-if="props.row.orderState=='正在进行'" type="warning"> {{ props.row.orderState }} </el-tag>
            <el-tag effect="dark" v-if="props.row.orderState=='订单完成'" type="success"> {{ props.row.orderState }} </el-tag>
        </template>
    </el-table-column>
        <el-table-column label="操作" width="200" fixed="right"> 
        <template #default="scope">
            <el-button size="small" type="primary" @click="paaOrders(scope.row)">修改</el-button>
            <el-button size="small" type="danger" @click="bvvOrders(scope.row)">取消</el-button>
        </template>
        </el-table-column>
  </el-table>

  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="query.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="query.total">
    </el-pagination>

    
<el-dialog title="订单详情" :visible.sync="centerDialogVisible" width="60%" center>
 <el-descriptions :column="3" border>
  <el-descriptions-item label="订单ID" label-class-name="my-label" content-class-name="my-content">{{newData.id}}</el-descriptions-item>
  <el-descriptions-item label="车牌">
      <el-input v-model="newData.carPlate"></el-input>
  </el-descriptions-item>
  <el-descriptions-item label="车型">{{newData.carType}}</el-descriptions-item>
  <el-descriptions-item label="客户电话">
      <el-input v-model="newData.customerPhone"></el-input>
  </el-descriptions-item>
  <el-descriptions-item label="客户姓名">
      <el-input v-model="newData.customerName"></el-input>
  </el-descriptions-item>
  <el-descriptions-item label="下单时间">{{newData.placeOrderTime}}</el-descriptions-item>
  <el-descriptions-item label="用户检测费">{{newData.orderMoney}}</el-descriptions-item>
  <el-descriptions-item label="预检时间">
      <el-date-picker v-model="newData.placeTestTime" type="datetime"  placeholder="选择日期时间" format="yyyy-MM-dd HH:mm:ss">
    </el-date-picker>
  </el-descriptions-item>
  <el-descriptions-item label="提车地址">{{newData.address}}</el-descriptions-item>
  <el-descriptions-item label="驾驶证">
      <el-image style="width: 100px; height: 100px" :src="items" fit="fit" v-for="(items,index) in newData.merchantLicenseImg" :key="index" :preview-src-list="newData.merchantLicenseImg"></el-image>
  </el-descriptions-item>
  <el-descriptions-item label="备注">
    <el-input></el-input>
  </el-descriptions-item>
</el-descriptions>
  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="qaaOrders">提 交</el-button>
  </span>
</el-dialog>
 
 </div>
  
</template>

<script>
import pickArea from "../../components/pickArea.vue"
 
export default {
  components:{
    pickArea 
  },
     inject:["reload"],
    mounted:function(){
      this.initOrders() 
    },
    data() {
      return {
        lists:[],
        query:{
            total:0,
            pageNum:1,
            pageSize:10,
            carPlate:"",
            paymentWay:"",
            stationName:"",
            stationId:"",
            province:"",
            city:"",
            driverName:"",
            driverId:"",
        },
        centerDialogVisible: false,
        newData:{},
        orderDetal:{},
        expand:[]
      }
    },
    methods:{
    initOrders: async function(){
        let res=await this.$http.post("/order/getDriverOrder",{
            pageNum:this.query.pageNum,
            pageSize:this.query.pageSize,
            carPlate:this.query.carPlate,
            paymentWay:this.query.paymentWay,
            stationId:this.query.stationId,
            province:this.query.province,
            city:this.query.city,
            driverId:this.query.driverId,
        });
        this. lists=res.data.object.list;
        this.query.total=res.data.object.total;
      
        
               
     },
     handleCurrentChange:function(pageNum){
         this.initOrders();
         this.query.pageNum=pageNum
     } ,
     handleSizeChange:function(pageSize){
         console.log(pageSize);
          this.initOrders();
          this.query.pageSize=pageSize
     },
    paaOrders:function(data){
        this.centerDialogVisible=true;
        data.merchantLicenseImg=JSON.parse(data.merchantLicenseImg)
        this.newData=data;
     },
    qaaOrders:function(){
        let order=JSON.parse(JSON.stringify(this.newData));
        order.merchantLicenseImg=JSON.stringify(order.merchantLicenseImg);
        this.$http.post("/order/updateDriverOrder",order).then((res)=>{
             if(res.data.code){
                 this.$message.success("已修改，成功提交");
                 this.reload()
             }
        });
          this.centerDialogVisible=false;
    },
    bvvOrders:function(orderId){

        this.$http.delete("/order/deleteDriverOrder?id="+orderId.id).then((res)=>{
              if(res.data.code){
                 this.$message.success("订单已删除");
                 this.reload()  
              }
        })
    },
    querySearch:function(stationName,cn){
      let studet=[];
      this.$http.get("/testStation/getAllStation",{params:{stationName}}).then((res)=>{
        // console.log(res);
        res.data.object.list.forEach(item => {
          studet.push({value:item.name,id:item.id}) 
          
        });
      })
      cn(studet)

    },
    handleSelect:function( item){
      this.query.stationId=item.id;
      this.initOrders()
    },
    getCity:function(prov,city){
       this.query.province=prov;
       this.query.city=city;
       this.initOrders()
    },
    getExpand:function(row,expandRows){
      if(expandRows.length){
        this.expand=[row.id];
        this.$http.get("/order/getOrderDetail?id="+row.id).then((res)=>{
          this.orderDetal=res.data.object;
          this.orderDetal.pickCarImg=JSON.parse(this.orderDetal.pickCarImg);
          this.orderDetal.testReport=JSON.parse(this.orderDetal.testReport);
          switch(this.orderDetal.serviceState){
            case "预约" :
              this.orderDetal.serviceState=1;
            case "预检" :
              this.orderDetal.serviceState=2;
            case "送检" :
              this.orderDetal.serviceState=3;
            case "还车" :
              this.orderDetal.serviceState=4;
            case "归档" :
              this.orderDetal.serviceState=5;
          }
      })
      }
    },
    dieSearch:function(driverName,cn){
      let aggut=[];
      this.$http.get("/driverUser/getAllDriver",{params:{driverName}}).then((res)=>{
         res.data.object.list.forEach(item => {
          aggut.push({value:item.driverName,id:item.id}) 
          
        });
      })
       cn(aggut)
    },
    leSelect:function( item){
      this.query.driverId=item.id;
      this.initOrders()
    }
    }
};
</script>
<style scoped lang="scss">
.desc-d{
  margin: 0 10px 30px 0;
  span{
    color: #000;
  }
}
</style>
